<template>
  <div class="active">
    <h3>供应商资格审查</h3>
    <el-table :data="filetable" stripe style="width: 100%">
      <!-- 使用 v-for 循环生成表格列 -->

      <el-table-column prop="status" label="序号" width="80" align="center">
        <template #default="scope">
          <span class="ellipsis">{{ scope.row.key }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="textValue"
        label="实质性响应条款"
        width="200"
        align="center"
      >
        <template #default="scope">
          <span v-if="scope.row.key" class="ellipsis">{{
            scope.row.textValue
          }}</span>
          <span
            v-else
            class="ellipsis"
            style="color: #06c; font-weight: bold"
            >{{ scope.row.textValue }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        v-for="(column, index) in fileColumns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
      >
        <template #default="scope">
          <span
            :style="{
              color:
                getDict('apply_supplier_status', scope.row[column.prop]) ==
                '不通过'
                  ? 'red'
                  : '',
            }"
            >{{
              getDict("apply_supplier_status", scope.row[column.prop]) == "出错"
                ? "待选择"
                : getDict("apply_supplier_status", scope.row[column.prop])
            }}</span
          >
        </template>
      </el-table-column>
    </el-table>

    <h3 v-if="projectInfo.ratifyExecTime">项目中止恢复请示材料</h3>
    <el-table
      :data="restoretable"
      style="width: 100%"
      v-if="projectInfo.ratifyExecTime"
    >
      <el-table-column prop="key" label="序号" width="80"></el-table-column>
      <el-table-column
        prop="reviewTime"
        label="评审时间"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="projectName"
        label="项目请示材料名称"
        width="600"
      ></el-table-column>
      <el-table-column label="操作" v-if="restoretable[0]&&restoretable[0].pushValue">
        <template #default="scope">
          <el-button type="text" @click="previewFile(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
      "
    ></div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { judgeProjectInfo } from "@/api/project.js";
import { ElMessage } from "element-plus";
import {
  getDictList,
  getDict,
  nowTime,
  getdict,
  SearchDicte,
} from "@/utils/common.js";
import {
  execTask,
  applySupplierInfoByProjectId,
  updateSupplierPushValue,
  updateApplySupplier,
} from "@/api/examine.js";

const emit = defineEmits(["next-step"]);
const route = useRoute();
const id = computed(() => route.query.id);
const options = ref([
  { value: "apply_supplier_pass", label: "通过状态" },
  { value: "apply_supplier_no_pass", label: "未通过" },
]);
// 定义表格列配置
const fileColumns = ref([]);
const nameId = ref([]);
const projectId = ref("");
const restoretable = ref([]);
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  projectInfo: {
    type: String,
    required: true,
  },
});
const getInfo = () => {
  applySupplierInfoByProjectId({ id: id.value }).then((res) => {
    if (res.code == "200") {
      filetable.value = res.data;
      console.log(res.data);
      projectId.value = res.data[0].projectId;
      let list = [];
      fileColumns.value = [];
      if (res.data.length > 0) {
        for (let z = 0; z < res.data.length; z++) {
          fileColumns.value.push({
            prop: filetable.value[z].supplierId,
            label: filetable.value[z].name,
            id: filetable.value[z].id,
            supplierId: filetable.value[z].supplierId,
          });
          if (res.data[z].valueList) {
            for (let i = 0; i < res.data[z].valueList.length; i++) {
              if (list[i] && res.data[z].valueList[i].textValue) {
                nameId.value.push({
                  id: res.data[z].valueList[i].id,
                  valueId: res.data[z].valueList[i].valueId,
                  textValue: res.data[z].valueList[i].textValue,
                  name: res.data[z].supplierId,
                  supplierId: res.data[z].valueList[i].supplierId,
                });
                list[i][res.data[z].supplierId] =
                  res.data[z].valueList[i].auditStatus;
              } else if (res.data[z].valueList[i].textValue) {
                list.push({
                  key: i + 1,
                  textValue: res.data[z].valueList[i].textValue,
                  applyId: res.data[z].valueList[i].applyId,
                  id: res.data[z].valueList[i].id,
                });
                nameId.value.push({
                  id: res.data[z].valueList[i].id,
                  valueId: res.data[z].valueList[i].valueId,
                  textValue: res.data[z].valueList[i].textValue,
                  name: res.data[z].supplierId,
                  supplierId: res.data[z].valueList[i].supplierId,
                });
                list[i][res.data[z].supplierId] =
                  res.data[z].valueList[i].auditStatus;
              }
            }
            console.log(list);
          } else {
            ElMessage({
              message: "供应商为空！",
              type: "error",
            });
          }
        }
      } else {
        ElMessage({
          message: "供应商为空！",
          type: "error",
        });
      }
      list.push({
        textValue: "综合认定",
      });
      for (let i = 0; i < res.data.length; i++) {
        list[list.length - 1][res.data[i].supplierId] = res.data[i].status;
      }
      filetable.value = list;
    }
  });
  if (props.projectInfo.ratifyExecTime && props.projectInfo.ratifyExecFile) {
    Stop.value = false;
    const extractFileName = (path) => {
      const regex = /[^\\/]+$/; // 匹配最后一个斜杠后的所有字符直到字符串结束
      const match = path.match(regex);
      return match ? match[0] : null;
    };
    const baseUrl = import.meta.env.VITE_APP_BASE_API;
    restoretable.value.push({
      key: 1,
      reviewTime: props.projectInfo.ratifyExecTime,
      projectName: extractFileName(props.projectInfo.ratifyExecFile),
      pushValue: props.projectInfo.ratifyExecFile,
    });
  }
};
const editRemark = (row, remark) => {
  const params = {
    id: row.applyId,
    remark: remark,
  };
  console.log(params);

  updateApplySupplier(params).then((res) => {
    if (res.code == "200") {
      console.log(res);
    }
  });
};
const handleSelectChange = (row, column, select, remark) => {
  let Id = "";
  let valueId = "";
  let bool = false;
  for (let i = 0; i < nameId.value.length; i++) {
    if (
      row.textValue == nameId.value[i].textValue &&
      column.supplierId == nameId.value[i].supplierId
    ) {
      console.log(i);

      Id = nameId.value[i].id;
      valueId = nameId.value[i].valueId;
      bool = true;
    }
  }
  if (!bool) {
    console.log("选择的列:", column);
    const params = {
      id: column.id,
      status: select,
      remark: remark,
    };
    updateApplySupplier(params).then((res) => {
      if (res.code == "200") {
        console.log(res);
      }
    });
    return;
  }
  const params = {
    id: Id,
    projectId: id.value,
    valueId: valueId,
    auditStatus: select,
  };
  console.log(params);

  return;
  updateSupplierPushValue(params).then((res) => {
    if (res.code == "200") {
      getInfo();
    }
  });
};
const generatePreviewUrl = (path) => {
  // 确保路径正确，适配后端服务地址
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  return `${baseUrl}${path}`;
};
const previewFile = (file) => {
  const url = generatePreviewUrl(file.pushValue);
  window.open(url, "_blank");
};
const nextStep = () => {
  if (props.type == "taskExamine") {
    const params = { projectId: id.value };
    execTask(params).then((res) => {
      if (res.code) {
        window.location.replace("");
      }
    });
  } else {
    emit("next-step", "taskPrice");
  }
};
// 定义表格数据
const filetable = ref([]);
onMounted(() => {
  getDictList("apply_supplier_status").then((res) => {
    options.value = res;
  });
  getInfo();
});
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
  .logo {
    display: flex;
    align-items: center;
    img {
      height: 40px;
      margin-right: 8px;
    }
    span {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    span {
      margin-right: 16px;
    }
  }
}
.breadcrumb {
  color: #888;
  font-size: 14px;
  padding: 16px;
  padding-bottom: 0;
  padding-left: 0;
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.top {
  height: 100px;
  width: 100%;
  background-color: rgb(0, 153, 255);
  display: flex;
  justify-content: space-between;
  align-items: end;
  line-height: 80px;
  font-size: 25px;
  div {
    width: 30%;
    display: flex;
    justify-content: center;
    color: #fff;
  }
}
.content {
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #000;
}
.section {
  margin-bottom: 24px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto 24px;
  border: 1px solid #000;
}
.sidebar {
  width: 27%;
  min-height: 70vh;
  box-sizing: border-box;

  b {
    padding-left: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: rgb(235.9, 245.3, 255);
  }
  span {
    padding-left: 50px;
  }
}
:deep(.el-menu) {
  border: 1px solid #dcdfe6;
}
:deep(.el-menu--vertical) {
  height: 100%;
}
:deep(.el-menu-item) {
  height: 45px;
  line-height: 45px;
}
:deep(.active > .el-form > .el-row) {
  display: flex;
  justify-content: space-between;
  align-items: end;
}
:deep(.active .el-form-item--label-top) {
  text-align: start;
}

/* 定义 .name 样式 */

:deep(.sectionfile > .el-row > .el-col) {
  margin-right: 20px;
  margin-bottom: 50px;
}
.section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: left;
  div {
    background-color: red;
  }
}

.card-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
}
:deep(.result .el-row) {
  flex-direction: column;
}
.custom-header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style scoped>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.singindiv {
  width: 300px;
  height: 150px;
  border: 1px solid #000;
}
.link {
  cursor: pointer; /* 改变鼠标指针形状为手型 */
  text-decoration: none; /* 移除默认的下划线 */
  color: blue; /* 颜色变为蓝色 */
  margin: 0px 20px;
}

/* 设置鼠标悬停时的样式 */
.link:hover {
  text-decoration: underline; /* 添加下划线 */
}
</style>
